<template>
	<view>
		<Issue />
		<!-- 食圈 -->
		<u-toast ref="uToast"></u-toast>
		<view style="text-align: center; padding: 20upx; font-weight: 800">食光社</view>
		<view class="eclipse">
			<view class="eclipse_item">
				<u-tabs :list="list" ref="tabs" font-size="30" :is-scroll="false" :current="current" @change="change"></u-tabs>
			</view>
			<!-- 推荐 -->
			<view class="recommend" v-show="current == 0">
				<view class="recommend_item" v-for="(item, index) in eclipselist" :key="item.id">
					<view class="recommend_item_top">
						<image :src="item.avatar" mode=""></image>
						<view class="recommend_item_title">
							<view class="">
								{{ item.name }}
							</view>
							<view class="">
								{{ item.time }}
							</view>
						</view>
						<view class="recommend_item_concern" @click="addConcern(item)">
							<u-icon :label="item.concern == 0 ? '关注' : '取消关注'" size="25" :name="item.concern == 0 ? 'man-add' : ''"></u-icon>
						</view>
					</view>
					<view class="recommend_item_description">
						{{ item.description }}
					</view>
					<view class="" style="display: flex">
						<view>
							<image style="width: 200upx; height: 200upx; padding: 10upx" :src="item.imglist" mode=""></image>
							<image style="width: 200upx; height: 200upx; padding: 10upx" :src="item.imglist1" mode=""></image>
							<image style="width: 200upx; height: 200upx; padding: 10upx" :src="item.imglist2" mode=""></image>
						</view>
					</view>

					<view class="recommend_item_xin" style="display: flex; align-items: center">
						<u-icon size="30" color="red" @click="addxin(item)" :name="item.status == 0 ? 'heart' : 'heart-fill'"></u-icon>
						<text>{{ item.thumbs }}</text>
						<u-icon size="30" @click="goAddpin(item)" style="margin-left: 30upx" name="more-circle"></u-icon>
						<text>{{ item.count }}</text>
					</view>
				</view>
			</view>
			<!-- 关注 -->
			<!-- 	111 -->
			<view class="" v-if="current == 1">
				<view class="recommend" v-if="addConcorcon.length > 0">
					<view class="recommend_item" v-for="(item, index) in addConcorcon" :key="item.id">
						<view class="recommend_item_top">
							<image :src="item.avatar" mode=""></image>
							<view class="recommend_item_title">
								<view class="">
									{{ item.name }}
								</view>
								<view class="">
									{{ item.time }}
								</view>
							</view>
						</view>
						<view class="recommend_item_description">
							{{ item.description }}
						</view>
						<view class="" style="display: flex">
							<view>
								<image style="width: 200upx; height: 200upx; padding: 10upx" :src="item.imglist" mode=""></image>
								<image style="width: 200upx; height: 200upx; padding: 10upx" :src="item.imglist1" mode=""></image>
								<image style="width: 200upx; height: 200upx; padding: 10upx" :src="item.imglist2" mode=""></image>
							</view>
						</view>

						<view class="recommend_item_xin" style="display: flex; align-items: center">
							<u-icon size="30" color="red" @click="addxin(item)" :name="item.status == 0 ? 'heart' : 'heart-fill'"></u-icon>
							<text>{{ item.thumbs }}</text>
							<u-icon size="30" @click="goAddpin(item)" style="margin-left: 30upx" name="more-circle"></u-icon>
							<text>{{ item.count }}</text>
						</view>
					</view>
				</view>
				<view class="" v-else>
					<u-empty text="暂无关注"></u-empty>
				</view>
			</view>
			<!-- 	111 -->

			<!--  评论 -->
			<u-action-sheet :closeOnClickOverlay="true" :closeOnClickAction="true" @close="show = false" :title="title" :show="show">
				<view class="">
					<view style="width: 100%; height: 600upx; text-align: left; white-space: pre-wrap" class="">
						<view class="" style="width: 100%; height: 200upx">
							{{ pllist }}
						</view>
					</view>
					<view style="position: absolute; bottom: 0; left: 0" class="">
						<input
							v-model="value"
							style="border: 1upx solid #ccc; float: left; width: 500upx; height: 60upx; margin-left: 10upx; border-radius: 20upx; text-align: left"
							placeholder="请输入内容"
							type="text"
						/>
						<button size="mini" type="primary" @click="goAddint" style="float: left; margin-left: 10upx">发布</button>
					</view>
				</view>
			</u-action-sheet>
		</view>
	</view>
</template>

<script>
import Issue from '../../components/issue/issue.vue';
import { getEclipseList, UpEclipseList, UpEclipseCon, UpEclipsePun } from '../../api/index.js';
export default {
	components: {
		Issue
	},
	data() {
		return {
			title: '评论',
			show: false,
			show1: true,
			value: '',
			list: [
				{
					name: '推荐'
				},
				{
					name: '关注'
				}
			],
			current: 0,
			isActive: '',
			msg: '这是一个消息\n这是另外一个消息',
			eclipselist: [],
			flag: false,
			imageList: [],
			itemObj: {},
			pllist: '',
			count: null,
			pListItem: []
		};
	},
	computed: {
		addConcorcon() {
			return this.eclipselist.filter((item) => item.concern == 1);
		}
	},
	methods: {
		change({ index }) {
			this.current = index;
		},
		changeInt(e) {},
		//评论
		goAddpin(item) {
			this.itemObj = item;
			this.pllist = item.pinglun;
			this.show = true;
		},
		goAddint() {
			if (this.value === '') {
				alert('评论不能为空!');
			} else {
				this.itemObj.count = this.count += 1;
				this.pllist += `\n${this.value}`;
				this.itemObj.pinglun = this.pllist;
				UpEclipsePun(this.itemObj).then((res) => {});
				this.value = '';
				this.show = false;
				this.$refs.uToast.show({
					message: '评论成功!'
				});
			}
		},
		//关注
		addConcern(params) {
			if (params.concern == 0) {
				params.concern = 1;
				this.$refs.uToast.show({
					message: '已关注'
				});
				UpEclipseCon(params).then((res) => {});
			} else if (params.concern == 1) {
				params.concern = 0;
				this.$refs.uToast.show({
					message: '取消成功'
				});
				UpEclipseCon(params).then((res) => {});
			}
		},

		//点赞
		addxin(params) {
			if (params.status == 0) {
				params.status = 1;
				params.thumbs += 1;

				UpEclipseList(params).then((res) => {});
			} else if (params.status == 1) {
				params.status = 0;
				params.thumbs -= 1;
				UpEclipseList(params).then((res) => {});
			}
		}
	},
	onShow() {
		uni.$emit('page', {
			show: false
		});
	},

	onLoad() {
		getEclipseList().then((res) => {
			this.eclipselist = res.data;
		});
	}
};
</script>

<style scoped lang="scss">
.eclipse {
	width: 100%;
	height: 100upx;

	.eclipse_item {
		display: flex;
		justify-content: center;
		padding: 20upx;
	}

	.concern {
		width: 100%;
		height: 200px;
	}
	.recommend {
		width: 100%;
		height: auto;
		.recommend_item {
			width: 95%;
			height: 300px;
			margin: 25upx auto;
			border-radius: 25upx;
			padding: 20upx;
			box-shadow: 0 0 10px #ccc;
			// box-shadow: 5px 0px 6px -5px #ccc, -5px 0px 6px -5px #ccc;
			box-sizing: border-box;
			.recommend_item_xin {
			}
			.recommend_item_description {
				width: 80%;
				padding: 20upx;
			}
			.recommend_item_top {
				width: 100%;
				padding: 10upx;
				height: 120upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				image {
					width: 100upx;
					height: 100upx;
					border-radius: 50%;
				}
				.recommend_item_title {
					width: 150upx;
					flex: 1;
					padding: 20upx;
					font-size: 30upx;
				}
				.recommend_item_concern {
					width: 170upx;
				}
			}
		}
	}
}
</style>
